<template>


  <div>

    <button @click="change">销毁</button>

    <div>
      <Vm v-if="show" ref="mylayout" :layout="els" :root="this.root"></Vm>
    </div>

  </div>

</template>

<script>

  import Vm from '../layout/View'

  import cal from '../layout/js/Calculate'

  let els = {
    canDrag: false,
    items: [
      {
        "x": 0, "y": 0, "w": 2, "h": 12, "i": "1", color: '#e5ec5a',
        layout: {
          canDrag: false,
          items: [
            {
              "x": 0, "y": 0, "w": 1, "h": 10, "i": "2", color: '#4fec67',
              layout: {
                canDrag: false,
                items: [
                  {
                    "x": 0, "y": 0, "w": 1, "h": 8, "i": "2", color: '#ec4561',
                  }
                ]
              }
            }
          ]
        }
      },

    ]
  };


  class Root {

    els = [];

    add(el) {
      this.els.push(el);
    }

    remove(el) {

      while (true) {
        let index = this.els.findIndex(o => o === el);
        if (index != -1) {
          this.els.splice(index, 1);
        }else{
          break;
        }
      }

    }

    closeDrag() {
      this.els.forEach(o => {
        o.closeDrag();
      });
    }

  }

  export default {
    name: "test",
    components: {
      Vm
    },
    data() {
      return {
        els,
        show: true,
        root: new Root()
      };
    },
    created() {
    },
    mounted() {

    },
    beforeDestroy() {
    },
    beofreUpdate() {

    },

    methods: {
      change() {
        this.show = false;
        this.els = {
          items: []

        };

        setTimeout(()=>{
          this.show = true;
        })

      }
    }
  }
</script>

<style scoped>

</style>
